<%@ include file="/WEB-INF/pages/taglibs.jsp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta name="decorator" content=""/>
    <meta name="decorate-type" content="" />
	<title>添加自定义报表</title>
    <meta name="_csrf" content="${_csrf.token}"/>
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <link href="${base}/css/antd/antd.css" rel="stylesheet" type="text/css" />
    <link href="${base}/css/stylesheets.css" rel="stylesheet" type="text/css" />
    <link href="${base}/css/datatables/datatables.css" rel="stylesheet" type="text/css" />
    <link href="${base}/css/infopanel/cybertron.infopanel.css" rel="stylesheet" type="text/css" />
    <link href="${base}/css/ztree/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <link href="${base}/css/cybertron/stylesheet.css" rel="stylesheet" type="text/css" />

<c:if test="${not empty customCss }">
<c:forEach items="${customCss }" var="css">
	<link rel="stylesheet" type="text/css" media="screen" href="${base }${css }" />
</c:forEach>
</c:if>

    <script type="text/javascript" src="${base}/js/react/react.js"></script>
    <script type="text/javascript" src="${base}/js/react/react-dom.js"></script>
    <script type="text/javascript" src="${base}/js/antd/antd.js"></script>

    <script type='text/javascript' src='${base}/js/jquery/jquery.min.js'></script>
    <script type='text/javascript' src='${base}/js/jquery/jquery-ui.min.js'></script>
    <script type='text/javascript' src='${base}/js/jquery/jquery-migrate.min.js'></script>
    <script type='text/javascript' src='${base}/js/jquery/globalize.js'></script>
    <script type='text/javascript' src="${base}/js/bootstrap/bootstrap.min.js"></script>

    <script type="text/javascript" src="${base}/js/plugins/mousewheel/jquery.mousewheel.min.js" ></script>
    <script type='text/javascript' src='${base}/js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js'></script>

    <script type="text/javascript" src="${base}/js/plugins/datatables/datatables.min.js"></script>
    <script type="text/javascript" src="${base}/js/plugins/infopanel/cybertron.infopanel.js"></script>

    <script type="text/javascript" src="${base}/js/cybertron/core.js"></script>
    
    <script type="text/javascript" src="${base}/js/plugins/validate/jquery.validate.js"></script>
	<script type="text/javascript" src="${base}/js/plugins/validate/jquery.validate.ext.methods.js"></script>
	<script type="text/javascript" src="${base}/js/plugins/form/jquery.form.min.js"></script>
	
<style type="text/css">
body {
    padding-top: 0px;    
	background: transparent;
}
.sw-theme-arrows>ul.step-anchor, 
.sw-theme-arrows .step-content {
	background: transparent;
}
.sw-theme-arrows>ul > li.active {
	top: 0;
}
table .select-checkbox {
	width: 10px !important;
}
.btn.check-all { 
	padding:6px; 
	border-radius:3px; 
}
.btn.check-all.active:before {
    font-family:FontAwesome;
    content:"\f00c";
    position: absolute;
    top: -2px;
    left: 0;
}
#wizard .sw-toolbar {
	background: transparent;
}
</style>
</head>

<body>
<div id="content-container">

	<form name="add-custom-report-form" action="${base}/report/custom/savereport" method="POST" class="form-horizontal">
    	<c:import url="/error/inline.jsp">
			<c:param name="errorPlacerId">custom-report-update</c:param>
		</c:import>
		<input type="hidden" name="report.id" id="custom-report-id" /> 	
    
      	<div id="wizard" class="row">
      		<ul>
			  	<c:forEach items="${steps }" var="step" varStatus="stepStatus">
				<li>
					<a href="#step-${stepStatus.count }">
						<label class="stepNumber">${stepStatus.count }</label>
						<span class="stepDesc">${step.title }</span>
					</a>
				</li>
				</c:forEach>
		    </ul>
		    <div>
			<c:forEach items="${steps }" var="step" varStatus="stepStatus">
	    		<div id="step-${stepStatus.count }" class="tab-content">
	    			<h2 class="StepTitle">${step.desc }</h2>
	    		</div>  
			</c:forEach>
			</div>    
      	</div>
			
		<!-- <div class="form-group form-btns" role="group">
			<div class="col-md-2 col-md-offset-3">
				<button type="button" class="btn btn-primary btn-block"><fmt:message key="button.cancel" /></button>
			</div>
			<div class="col-md-2">
				<button type="button" class="btn btn-primary btn-block">上一步</button>
			</div>
			<div class="col-md-2">
				<button type="button" class="btn btn-primary btn-block">下一步</button>
			</div>
			<div class="col-md-2">
				<button type="submit" class="btn btn-primary btn-block"><fmt:message key="button.ok" /></button>
			</div>
		</div> -->
    </form>
	
</div>
<div id="script-container">
   <script type="text/javascript" src="${base}/js/react/components/event/filter/cybertron.filter.min.js" ></script>
<c:if test="${not empty customJs }">
<c:forEach items="${customJs }" var="js">
	<script type="text/javascript" src="${base }${js }"></script>
</c:forEach>
</c:if>
<script type="text/javascript">
var reportmap = {
	wizardParams: {data: { 'report.uuid': $("#custom-report-id").val()} },		
	validates: [
		{ rules: {}, messages: {} },
		{
			rules: {
				"report.cacheid": {required: true}
			},
			messages: {
				"report.cacheid": "请选择数据源"
			}
		},
		{ rules: {}, messages: {} },
		{ rules: {}, messages: {} }
	] 	
};

var eventfilterFactory = React.createFactory(Cybertron.Filter);
//var eventfilter = ReactDOM.render(eventfilterFactory({data: {}}), $("#filter-container")[0]);
$(document).ready(function(){
	// init validate rules
	var validator = $("#add-custom-report-form").validate();
	reportmap.validates[0] = { rules: validator.settings.rules, messages: validator.settings.messages };

    // Toolbar extra buttons
    var btnFinish = $('<button/>').text('<fmt:message key="button.ok" />').addClass('btn btn-info').on('click', function(){
    	consloe.log('Finish Clicked'); 
    });
    
    var btnCancel = $('<button/>').text('<fmt:message key="button.cancel" />').addClass('btn btn-danger').on('click', function(){ 
    	$('#wizard').smartWizard("reset");                         
    }); 
	
	// Smart Wizard
	$('#wizard').smartWizard({
		selected: 0, 
		theme: 'dots', // arrows
		keyNavigation: false,
		transitionEffect: 'fade',
		lang: {
			next: '<fmt:message key="report.custom.button.next" bundle="${i18n_report}" />',
			previous: '<fmt:message key="report.custom.button.prev" bundle="${i18n_report}" />'
		},
		contentURL: '${base }/report/custom/getStepContent?type=${param.type }',
		toolbarSettings: {
			toolbarPosition: 'bottom',
            toolbarExtraButtons: [btnFinish, btnCancel]
        },
		contentCache: true,
		onLeaveStep: validateAndGather,
		//onShowStep: afterShowStep,
		onFinish: submitForm,
		onCancel: cancelCreate
	});

	$("#wizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
		$(this).find('nav button').each(function() {
			$(this).removeClass( "btn-default" ).addClass( "btn-primary" );
		});
		$(this).find('.table-column').DataTable({
			columnDefs: [{
               "className": 'select-checkbox',
               "targets": 0
            },
			{
				"render": null,
				"targets": '_all'
			}],
			scrollY: 230, //支持垂直滚动
			paging: false // 禁止分页
		});
	});
	
	$(document).on("click", ".report-page", function(e){
		// 选中页眉或页脚图标、文字、页码后可添加属性
		var $formgroup = $(this).closest('.form-group');
		var disable = !$(this).is(':checked');
		$formgroup.find('input:not(:checkbox), select, button').each(function() {
			$(this).prop('disabled', disable);
        });
	}).on("change", ".report-custom-data-source", function(e){
		// 选中数据源后修改提示和过滤器
		var uuid = $(this).val();
		if(uuid != '') {
			var desc = $(this).data('desc');
			$("#data-source-desc").text(desc);
			// 添加自定义参数
			reportmap.wizardParams.data['report.cacheid'] = uuid;
			$('#wizard').smartWizard('setParams', reportmap.wizardParams);
			
			$.ajax({
                url: "${base}/report/custom/getDataSource",
                data: {uuid: uuid},
                type: "POST",
                async: false,
				dataType: 'json',
			}).done(function(data) {
				console.log(data);
				reportmap['reportcache'] = data;
				//设置可添加条件的字段 eventfilter = ReactDOM.render(eventfilterFactory({data: {}}), $("#filter-container")[0]);
            });
		}
	});
});

function validateAndGather(obj){
	
}

function afterShowStep(){}

function submitForm(){}

function cancelCreate(){}

</script>
</div>
</body>
</html>